<script setup lang="ts">
import success from '@/static/images/modal_success.png'
import warning from '@/static/images/modal_warning.png'
import error from '@/static/images/modal_error.png'

const props = withDefaults(defineProps<{
  type: 'success' | 'warning' | 'error'
  title: string
  content: string
  buttonLabel: string
}>(), {
})

const currentIcon = computed(() => {
  const icons = {
    success,
    warning,
    error,
  }
  return icons[props.type]
})
</script>

<template>
  <view class="absolute left-1/2 top-1/2 w-620rpx flex flex-col items-center rounded-20rpx bg-white -translate-1/2">
    <image
      class="absolute right-40rpx top-40rpx h-30rpx w-30rpx"
      src="@/static/images/xmark_gray.png"
    />
    <Spacer h="100" />
    <image
      class="h-160rpx w-160rpx"
      :src="currentIcon"
    />
    <Spacer h="40" />
    <view class="text-40rpx text-#333333 font-semibold leading-56rpx">
      {{ title }}
    </view>
    <Spacer h="26" />
    <view class="text-center text-32rpx text-#333333 leading-45rpx">
      {{ content }}
    </view>
    <Spacer h="100" />
    <RGButton width="540">
      {{ buttonLabel }}
    </RGButton>
  </view>
</template>
